import styled from '@emotion/styled';
import React from 'react';
import AgentService from '@/modules/Agent';
import { IStream } from '@/modules/interface';
import { useTranslation } from 'react-i18next';

interface SelectClientProps {
	selectRole: (stream: IStream) => void;
}

const RoleItem = styled.div`
	min-width: 124px;
	height: 40px;
	border-radius: 4px;
	border: 1px solid #e3e3e3;
	cursor: pointer;
	margin-bottom: 14px;
	margin-right: 14px;
`;

const RoleBox = styled.div`
	height: 134px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
`;

const Role = styled.p`
	font-size: 13px;
	color: #202020;
	line-height: 40px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
`;

const Explain = styled.p`
	font-size: 13px;
	color: #202020;
	margin: 0;
	padding: 0;
	margin-bottom: 18px;
`;

const SelectClient = (props: SelectClientProps) => {
	const { selectRole } = props;

	const { t } = useTranslation();
	const RoleList = AgentService.getAllMediaSteams().filter(item => item.label.indexOf('customer') > -1);
	return (
		<>
			<div>
				<Explain>{t('select-role-collect-variable')}</Explain>
				<RoleBox>
					{RoleList.map(item => {
						return (
							<RoleItem
								key={item.clientId}
								onClick={() => {
									selectRole(item);
								}}
							>
								<Role>{item.customerRole}</Role>
							</RoleItem>
						);
					})}
				</RoleBox>
			</div>
		</>
	);
};

export default SelectClient;
